<template>
  <div>
    <div style="position:absolute;width: 100%">
      <div class="q-pa-md" style="width: 100%; padding:0; height: 70px;">
        <q-toolbar class="bg-primary glossy text-white" style="height: 100%">
          <q-btn flat round dense icon="add" class="q-mr-sm" v-on:click="open" />
          <q-toolbar-title>监测点列表</q-toolbar-title>
          <q-input  rounded outlined v-model="keyword" label="关键词检索" />
          <q-btn flat round dense icon="search" v-on:click="findkeyCard2" />
        </q-toolbar>
      </div>
    </div>
    <div>
    <div
         style="width: 100%;right: 0;top: 80px;bottom: 0;padding: 0; overflow-y: scroll;position: absolute;float: left" >
      <q-card v-for="section in datalist" :key="section.id"  v-bind:class="section.grade">
      <q-card-section class='item'>
        监测点编号：{{ section.id }}
      </q-card-section>
      <q-card-section class='item'>
        监测点名：{{ section.name }}
      </q-card-section>
      <q-card-section class='item'>
        监测点地址：{{section.addressName}}
      </q-card-section>
      <q-card-section class='item'>
        监测点坐标：({{ section.pointX }} , {{section.pointY}})
      </q-card-section>
      <q-card-section class='item'>
        监测点负责人：{{ section.handPeople}}
      </q-card-section>
      <q-card-section class='item'>
        负责人电话：{{section.tel}}
      </q-card-section>
      <q-card-section class='item'>
        状态：{{section.status}}
      </q-card-section>
      <q-card-actions align="center">
        <el-button type="primary" style="font-size: 18px" v-on:click="deleteSection(section.id)">删除</el-button>
        <el-button type="primary" style="font-size: 18px" v-on:click="update(section)">编辑</el-button>
        <el-button type="primary" style="font-size: 18px" v-on:click="toDataInfo(section.id)">详情</el-button>
      </q-card-actions>
      </q-card>
    </div>
      <el-pagination
          style="bottom:0;right:30px;position: absolute"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="total, prev, pager, next, jumper"
          :total='maxsize'>
      </el-pagination>
    </div>
    <UploadForm  ref="edit" @download="findKeyCard"></UploadForm>
  </div>
</template>


<script>
import UploadForm from "@/components/pointlist/UploadForm";
export default {
  name: "PointList",
  components: {UploadForm},
  data () {
    return {
      currentPage:1,
      datalist:[],
      keyword:'',
      current:1,
      maxsize:0,

    }
  },
  mounted() {
    this.findKeyCard()
  },
  methods:{
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      this.findKeyCard()
    },
    update(data){
      this.$refs['edit'].update(data)
    },

    findKeyCard(){
      this.$axios.post('/sectionSum',{keywords:this.keyword,index:this.currentPage}).then(res=>{
        this.maxsize=res.data;
      })
      this.$axios.post('/findSections',{keywords:this.keyword,index:this.currentPage}).then(resp=>{
        this.datalist=resp.data;
      })
    },

    findkeyCard2(){
      this.currentPage=1;
      this.findKeyCard();
    },

    open(){
      this.$refs['edit'].open();
    },

    deleteSection(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/deleteSections?key='+id).then(res=> {
          if (res.data.code === 200) {
            this.$emit('download');
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            })
          }
          this.findKeyCard();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    toDataInfo: function(id){
      this.$router.push({
        path: '/data',
        query: {
          mallCode: id,
        }
      })
    },

  }
}
</script>

<style scoped>
.Green{
  color: #000000;
  font-size:18px;
  width:300px;
  background-color: mediumseagreen;
  padding: 10px;
  margin: 5px;
  font-family: 华文楷体;
  float: left;

}
.Red{
  color: #000000;
  font-size:18px;
  width:300px;
  background-color: red;
  padding: 10px;
  margin: 5px;
  font-family: 华文楷体;
  float: left;
}
.Yellow{
  color: #000000;
  font-size:18px;
  width:300px;
  background-color: yellow;
  padding: 10px;
  margin: 5px;
  font-family: 华文楷体;
  float: left;
}
.item{
  padding: 0;
}

</style>
